<!--  -->
<template>
  <div class="search-popup">
    <van-search v-model="searchVal"
                show-action
                v-bind:placeholder="placeholderVal"
                @search="onSearch"
                @cancel="onCancel"
                @input="onInput" />
    <!--
                 父传子：props
                 -->
    <!-- 默认进入时：blockShow==1 -->
    <history-hot v-if="this.blockShow==1"
                 :historyKeywordList="historyKeywordList"
                 :hotKeywordList="hotKeywordList"
                 @tagClick="tagClick"></history-hot>
    <!-- onInput搜索框里有输入时：blockShow==2 -->
    <search-tip v-else-if="this.blockShow==2"
                :SearchTipList="SearchTipList"
                @cellClick="tagClick"></search-tip>
    <!-- onSearch执行搜索时：blockShow==3 -->
    <search-product v-else
                    :goodsList="goodsList"
                    :filterCategory="filterCategory"
                    @categoryChange="categoryChange"
                    @priceChange="priceChange"></search-product>
    <!-- <comp1 v-if="this.blockShow==1"></comp1>
    <comp2 v-else-if="this.blockShow==2"></comp2>
    <comp3 v-else></comp3> -->
  </div>
</template>

<script>
import HistoryHot from '../components/HistoryHot.vue'
import SearchTip from '@/components/SearchTip.vue'
import SearchProduct from "@/components/SearchProduct.vue"
import { getsearchDataList } from '@/request/api.js'
import { getSearchTipList } from "@/request/api.js"
import { getProductList } from "@/request/api.js"
export default {
  components: {
    HistoryHot,
    SearchTip,
    SearchProduct,
  },
  data () {
    return {
      //搜索框文字
      searchVal: '',
      //占位符文本
      placeholderVal: '',
      /* 
      为1，搜索展示历史记录和热门搜索，
      为2，展示搜索的列表
      为3，搜索商品列表
      */
      blockShow: 1,
      //历史搜索值
      historyKeywordList: [],
      //热门搜索值
      hotKeywordList: [],
      //搜索实时提示数据
      SearchTipList: [],
      //搜索分类数据
      filterCategory: [],
      //搜索商品数据
      goodsList: [],
      //商品分类id
      categoryId: 0,
      //商品排序默认desc
      order: 'desc',
      //商品按什么排序(默认是id，也可以是price)
      sort: 'id'
    }
  },
  methods: {
    tagClick (value) {
      // console.log(value);
      this.onSearch(value);
    },
    //搜索价格排序
    priceChange (value) {
      //修改排序
      this.order = value;
      this.sort = 'price';
      this.onSearch(this.searchVal);
    },
    //搜索分类事件
    categoryChange: function (val) {
      //修改分类ID
      this.categoryId = val;
      //console.log("categoryClick", val);
      this.onSearch(this.searchVal);
    },
    onSearch: function (searchval) {
      //console.log("搜索执行！", searchval);
      this.blockShow = 3;
      //请求商品列表
      getProductList({
        keyword: searchval,
        page: 1,
        size: 10,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort
      }).then((res) => {
        if (res.errno == 0) {
          //console.log(res.data);
          this.goodsList = res.data.goodsList;
          /* 
          处理搜索分类数据
          */
          /*          checked: true
          id: 0
          name: "全部" */
          let newArr = JSON.parse(JSON.stringify(res.data.filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'));
          this.filterCategory = newArr;
          //console.log(newArr);
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    onCancel: function () {
      //console.log("搜索取消");
      //下面用push方法有局限性，只能在home页面下使用，使用go方法更好
      //this.$router.push("/home");
      this.$router.go(-1);
    },
    onInput (searchVal) {
      //console.log("搜索输入", SearchVal);
      //当输入框有输入时，blockShow等于2
      this.blockShow = 2;
      /* 
      获得搜索候选数据
     */
      getSearchTipList({ keyword: searchVal }).then((res) => {
        if (res.errno == 0) {
          //console.log(res);
          this.SearchTipList = res.data;
        }
      }).catch((err) => {
        console.log(err);
      })
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {
    //在搜索页面创建完成时，就请求数据
    getsearchDataList().then((res) => {
      if (res.errno == 0) {
        //console.log(res.data);
        //设置搜索默认值
        this.placeholderVal = res.data.defaultKeyword.keyword;
        //设置历史搜索值
        this.historyKeywordList = res.data.historyKeywordList;
        //设置热门搜索值
        this.hotKeywordList = res.data.hotKeywordList;
      }
    }).catch(err => {
      console.log(err)
    })
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="less" scoped>
.search-popup {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /*  background-color: rgba(0, 0, 0, 0.5); */
  background-color: #efefef;
  //z-index: 99;
}
</style>